import React from 'react';
import './Modal.css'; // Assuming a common CSS for modals

interface AuthModalProps {
    isVisible: boolean;
    onStartAuth: () => void;
}

const AuthModal: React.FC<AuthModalProps> = ({ isVisible, onStartAuth }) => {
    if (!isVisible) return null;

    return (
        <div id="authModal" className="modal">
            <div className="modal-content">
                <div className="auth-container">
                    <div className="auth-header">
                        <h2>连接你的YouTube账户</h2>
                        <p>授权后我们将获取你的订阅列表，帮你更好地管理内容</p>
                    </div>

                    <div className="auth-steps">
                        <div className="step">
                            <div className="step-number">1</div>
                            <div className="step-content">
                                <h4>安全授权</h4>
                                <p>通过Google官方OAuth安全登录</p>
                            </div>
                        </div>
                        <div className="step">
                            <div className="step-number">2</div>
                            <div className="step-content">
                                <h4>同步订阅</h4>
                                <p>获取你的YouTube订阅列表</p>
                            </div>
                        </div>
                        <div className="step">
                            <div className="step-number">3</div>
                            <div className="step-content">
                                <h4>开始管理</h4>
                                <p>为频道分类，高效浏览内容</p>
                            </div>
                        </div>
                    </div>

                    <div className="auth-permissions">
                        <h4>我们需要的权限：</h4>
                        <ul className="permission-list">
                            <li><span className="permission-icon">✓</span> 查看你的YouTube订阅列表</li>
                            <li><span className="permission-icon">✓</span> 获取订阅频道的最新视频</li>
                            <li><span className="permission-icon">✗</span> 不会访问你的观看历史</li>
                            <li><span className="permission-icon">✗</span> 不会代你进行任何操作</li>
                        </ul>
                    </div>

                    <div className="auth-buttons">
                        <button className="btn btn-google" onClick={onStartAuth}>
                            <svg width="18" height="18" viewBox="0 0 24 24">
                                <path fill="#4285f4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                                <path fill="#34a853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                                <path fill="#fbbc05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                                <path fill="#ea4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                            </svg>
                            使用Google账户登录
                        </button>
                        <p className="auth-note">登录即表示同意我们的 <a href="#">服务条款</a> 和 <a href="#">隐私政策</a></p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default AuthModal;
